<template>
    <div class="setting">
        <app-head title="账号中心" :right="isWechat ? '' : 'logout'"></app-head>

        <ul class="setting-inner">
            <li class="setting-item">
                <input class="setting-file" type="file" ref="upload" @change="changeAvatar($event)">
                <span class="setting-title">头像</span>
                <span class="setting-content"><img class="setting-avatar" :src="info.avatar || require('@/assets/img/icon_avatar.png')"></span>
                <img class="setting-rarr" src="@/assets/img/mine_icon_youjiantou.png" alt="">
            </li>
            <li class="setting-item" @click="dialog.visible = true">
                <span class="setting-title">昵称</span>
                <span class="setting-content">{{info.nickname}}</span>
                <img class="setting-rarr" src="@/assets/img/mine_icon_youjiantou.png" alt="">
            </li>
            <li class="setting-item" @click="$router.push('/account/unbind')" v-if="userinfo.has_bind_mobile === 2">
                <span class="setting-title" >绑定手机号</span>
                <span class="setting-content">{{info.mobile.replace(info.mobile.substring(3,7), '****')}}</span>
                <img class="setting-rarr" src="@/assets/img/mine_icon_youjiantou.png" alt="">
            </li>
            <li class="setting-item" @click="$router.push('/account/bind')" v-else>
                <span class="setting-title" >绑定手机号</span>
                <span class="setting-content">去绑定</span>
                <img class="setting-rarr" src="@/assets/img/mine_icon_youjiantou.png" alt="">
            </li>
            <li class="setting-item" @click="$router.push('/account/modify')" v-if="!isWechat">
                <span class="setting-title">修改密码</span>
                <span class="setting-content"></span>
                <img class="setting-rarr" src="@/assets/img/mine_icon_youjiantou.png" alt="">
            </li>
        </ul>

        <div class="dialog" v-if="dialog.visible">
            <div class="dialog-mask" @click="closeDialog"></div>
            <div class="dialog-container">
                <h1 class="dialog-title">昵称修改</h1>
                <div class="dialog-content">
                    <input class="input" type="text" placeholder="请输入" v-model="info.nickname">
                </div>
                <div class="dialog-footer">
                    <button class="dialog-button dialog-button__cancel" @click="closeDialog">取消</button>
                    <button class="dialog-button dialog-button__confirm" @click="changeNikename">确认</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import api from '@/api'
import { mapGetters } from 'vuex'
export default {
  name: 'setting',
  components: {
  },
  data () {
    return {
      dialog: {
        visible: false
      },
      info: {
        nickname: '',
        avatar: '',
        mobile: ''
      },
      isWechat: /micromessenger/i.test(navigator.userAgent)
    }
  },
  computed: {
    ...mapGetters([
      'userinfo'
    ])
  },
  methods: {
    closeDialog () {
      this.dialog.visible = false
      this.info.nickname = this.userinfo.nickname
    },
    changeNikename () {
      api.setNikename({ nickname: this.info.nickname }, res => {
        this.$tips(res)
        this.closeDialog()
        this.$store.dispatch('getUserinfo')
      }, msg => {
        this.$tips(msg)
      })
    },
    changeAvatar (event) {
      let $target = event.target || event.srcElement
      let file = $target.files[0]
      api.assetUpload({ file: file }, res => {
        this.info.avatar = res.preview_url
        api.setAvatar({ avatar: res.preview_url }, res => {
          this.$tips(res)
        }, msg => {
          this.$tips(msg)
        })
      }, msg => {
        this.$tips(msg)
      })
    }
  },
  created () {
    Object.keys(this.info).forEach((key, ids) => {
      this.info[key] = this.userinfo[key]
    })
  },
  watch: {
    userinfo (val) {
      this.info.nickname = val.nickname
      this.info.avatar = val.avatar
      this.info.mobile = val.mobile
    }
  }
}
</script>

<style scoped="scoped" lang="scss">

    .dialog {
        width: 100vw;
        height: 100vh;
        position: fixed;
        z-index: 11;
        top: 0;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        &-mask {
            background-color: rgba(0, 0, 0, 0.6);
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
        }
        &-container {
            overflow: hidden;
            width: 3rem;
            border-radius: 0.05rem;
            background-color: #ffffff;
            z-index: 12;
            padding: 0px 0.15rem;
        }
        &-title {
            line-height: 0.54rem;
            text-align: center;
            font-size: 0.18rem;
            color: #333333;
            border-bottom: 0.01rem solid #dddddd;
        }
        &-content {
            padding: 0.15rem 0;
        }
        &-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 0.21rem;
        }
        &-button {
            width: 1.25rem;
            line-height: 0.4rem;
            text-align: center;
            font-size: 0.15rem;
            border-radius: 0.04rem;
            &__cancel {
                color: #999999;
                border: 0.01rem solid #dddddd;
                background-color: #ffffff;
            }
            &__confirm {
                color: #ffffff;
                border: 0.01rem solid #FF8C2D;
                background-color: #FF8C2D;
            }
        }
        .input {
            width: 100%;
            height: 0.45rem;
            font-size: 0.14rem;
            color: #666666;
            padding-left: 0.09rem;
            background-color: #F8F8F8;
            border-radius: 0.03rem;
            &::placeholder {
                color: #999999;
            }
        }
    }

    .setting {
        display: flex;
        flex-direction: column;
        width: 100%;
        min-height: 100vh;
        overflow-y: scroll;
        background:rgba(248,248,248,1);
        &-inner {
            padding: 0 0.15rem;
            background-color: #ffffff;
        }

        &-item {
            align-items: center;
            border-bottom: 0.01rem solid #f3f3f3;
            color: #333;
            font-weight: 600;
            display: flex;
            font-size: 0.15rem;
            height: 0.54rem;
            position: relative;
            &:last-child {
                border-bottom:none;
            }
        }

        &-file {
            height: 100%;
            left: 0;
            opacity: 0;
            position: absolute;
            top: 0;
            width: 100%;
        }

        &-content {
            flex: 1;
            font-size: 0.13rem;
            color: #999999;
            padding-right: 0.06rem;
            text-align: right;
        }

        &-avatar {
            border-radius: 50%;
            height: 0.26rem;
            width: 0.26rem;
        }
        &-rarr {
            width: 0.15rem;
        }
    }

</style>
